<template>
  <u-popup v-model="modelValue_s" mode="bottom" border-radius="14" @close="closeThePopUpBox">
    <view class="w-full !bg-white !rounded-t-[1rem]" @click.stop>
      <view class="flex flex-col gap-4 py-5">
        <view class="flex justify-between items-center px-4">
          <view class="font-bold text-[1.25rem] text-[#171B24]">{{ title }}</view>
          <view
            class="w-[1.5rem] h-[1.5rem] bg-[#F4F6F8] flex justify-center items-center rounded-full"
            v-if="!edit"
            @click="closeThePopUpBox"
          >
            <u-icon name="close" color="#171B24" size="26"></u-icon>
          </view>
          <view
            class="w-[1.5rem] h-[1.5rem] bg-[#F4F6F8] flex justify-center items-center rounded-full"
            v-if="edit"
            @click="deleteAll"
          >
            <u-icon name="trash" color="#171B24" size="26"></u-icon>
          </view>
        </view>
        <div class="bg-[#F4F6F8] w-full h-[.0625rem]"></div>
        <view class="flex flex-col gap-4 px-4">
          <slot></slot>
          <template v-if="!edit">
            <view class="grid grid-cols-3 h-[2.75rem] gap-4" style="bottom: calc(env(safe-area-inset-bottom) / 2)">
              <view class="col-span-1 bg-[#F4F6F8] rounded-full flex items-center justify-center" @click="reset">
                <text class="text-[1rem] text-black">重置</text>
              </view>
              <view class="bg-[#00A9AB] rounded-full flex items-center justify-center col-span-2" @click="submit">
                <text class="text-[1rem] text-[#E5F6F6]">完成</text>
              </view>
            </view>
          </template>
          <template v-if="edit">
            <view class="grid grid-cols-1 h-[2.75rem] gap-4" style="bottom: calc(env(safe-area-inset-bottom) / 2)">
              <view
                class="bg-[#00A9AB] rounded-full flex items-center justify-center col-span-2"
                @click="editConfirmation"
              >
                <text class="text-[1rem] text-[#E5F6F6]"> 完成</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    data() {
      return {
        modelValue_s: false
      }
    },
    props: {
      modelValue: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      edit: {
        type: Boolean,
        default: false
      }
    },

    watch: {
      modelValue: {
        immediate: true,
        deep: true,
        handler(newValue, oldValue) {
          if (newValue) {
            // 禁止页面滚动
            this.modelValue_s = true
            document.body.style.overflow = 'hidden'
          } else {
            // 恢复页面滚动
            this.modelValue_s = false

            document.body.style.overflow = ''
          }
        }
      }
    },
    methods: {
      submit() {
        this.$emit('submit')
      },
      reset() {
        this.$emit('reset')
      },
      // 全部删除
      deleteAll() {
        this.$emit('delete-all')
      },
      editConfirmation() {
        this.$emit('edit-confirmation')
      },
      closeThePopUpBox() {
        this.$emit('update:modelValue', false)
      }
    },
    beforeUnmount() {
      // 组件销毁时恢复滚动
      document.body.style.overflow = ''
    }
  }
</script>

<style lang="scss" scoped></style>
